<template>
  <ZoneContent
    v-model:list="zoneList"
    @loadMore="handleLoadMore"
    :loading="loading"
    :total="total"
    :pageInfo="pageInfo"
  />
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getFollowList } from '@/api/zone'

import ZoneContent from './zone-content.vue'

const zoneList = ref([])
const loading = ref(false)
const total = ref(0)
const bagePageInfo = {
  page: 0,
  pageSize: 10
}

const pageInfo = ref(bagePageInfo)
const handleLoadMore = () => {
  loading.value = true
  getData().finally(() => {
    loading.value = false
  })
}
const getData = () => {
  return getFollowList({
    ...pageInfo.value,
    page: pageInfo.value.page + 1
  }).then((res) => {
    pageInfo.value.page = res.page
    pageInfo.value.pageSize = res.pageSize
    zoneList.value = [...zoneList.value, ...res.list]
    total.value = res.total
  })
}
onMounted(() => {
  getData()
})
</script>
<style lang="less" scoped></style>
